<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-logo">技术博客</div>
        <div class="footer-links">
          <a href="javascript:void(0)">关于我们</a>
          <a href="javascript:void(0)">使用条款</a>
          <a href="javascript:void(0)">隐私政策</a>
          <a href="javascript:void(0)">联系我们</a>
        </div>
        <div class="footer-copyright">
          © {{ currentYear }} 技术博客. 保留所有权利.
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const currentYear = computed(() => new Date().getFullYear())
</script>

<style scoped lang="scss">
.footer {
  background-color: #f5f7fa;
  padding: 40px 0;
  margin-top: 60px;
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .footer-logo {
    font-size: 20px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 20px;
  }
  
  .footer-links {
    margin-bottom: 20px;
    
    a {
      color: #606266;
      text-decoration: none;
      margin: 0 10px;
      
      &:hover {
        color: #409eff;
      }
    }
  }
  
  .footer-copyright {
    color: #909399;
    font-size: 14px;
  }
}
</style> 